<template>
	
	<div class="white-box">
	    <title-more title="基本信息" />
		<div class="od-one">
			<div class="od-one__item">
				<detail-item title="uid" one-value bottom="16px" :value="objs.id" title-align="left" title-width="auto" />
			    <detail-item title="昵称" one-value bottom="16px" :value="objs.user_name" title-align="left" title-width="auto" />
			    <detail-item v-if="objs.level>0" title="会员等级" one-value bottom="16px" :value="objs.level_label.label" title-align="left" title-width="auto" />
			    <detail-item title="性别" one-value bottom="16px" :value="objs.sex_label" title-align="left" title-width="auto" />
				<detail-item title="民族" one-value bottom="16px" :value="objs.nation" title-align="left" title-width="auto" />
			</div>
			
			<div class="od-one__item">
				<detail-item title="积分" one-value bottom="16px" :value="objs.integral_balance" title-align="left" title-width="auto" />
			    <detail-item title="余额" one-value bottom="16px" :value="objs.wallet_balance" title-align="left" title-width="auto" />
			    <detail-item title="佣金" one-value bottom="16px" :value="objs.commission" title-align="left" title-width="auto" />
				<detail-item v-if="objs.invite_id>0" title="上级id" one-value bottom="16px" :value="objs.invite_user.id" title-align="left" title-width="auto" />
				<detail-item v-if="objs.invite_id>0" title="上级昵称" one-value bottom="16px" :value="objs.invite_user.user_name" title-align="left" title-width="auto" />
			</div>
			
			<div class="od-one__item">
				<detail-item title="分销商" one-value bottom="16px" :value="objs.is_distributor==1?'是':'否'" title-align="left" title-width="auto" />
			    <detail-item title="核销员" one-value bottom="16px" :value="objs.is_verifier==1?'是':'否'" title-align="left" title-width="auto" />
			    <detail-item title="骑手" one-value bottom="16px" :value="objs.is_rider==2?'是':'否'" title-align="left" title-width="auto" />
			</div>
		</div>
		
		<el-tabs v-model="tabName" type="card" @tab-click="handleClick">
			<el-tab-pane :label="`${item.label}`" :name="index" v-for="(item,index) in tabarr" :key="index">
		
			</el-tab-pane>
		</el-tabs>
		
		<div v-if="tabName==0">
			<el-table class="table-mb" v-loading="loading" :data="arr_data"
				:header-cell-style="{ background: '#F5F7FA' }" element-loading-background="rgba(255, 255, 255, 0.6)"
				@selection-change="handleAllSelected">
				<!-- <el-table-column type="selection" width="55" /> -->
				<el-table-column prop="osn" label="订单编号"></el-table-column>
				<el-table-column prop="meet_price" label="商品总价" ></el-table-column>
				<el-table-column prop="reality_price" label="实付金额" ></el-table-column>
				<el-table-column prop="over_at" label="完成时间" ></el-table-column>
				<el-table-column prop="remarks" label="备注" ></el-table-column>
			</el-table>
		</div>
		<div v-else>
			<el-table class="table-mb" v-loading="loading" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
				element-loading-background="rgba(255, 255, 255, 0.6)" @selection-change="handleAllSelected">
				<!-- <el-table-column type="selection" width="55" /> -->
				<el-table-column prop="change_before_price" label="变动前" ></el-table-column>
				<el-table-column prop="change_price" label="变动金额"></el-table-column>
				<el-table-column prop="change_after_price" label="变动后"></el-table-column>
				<el-table-column prop="variation_type_label" label="类型"></el-table-column>
				<el-table-column prop="serial_number" label="流水号"></el-table-column>
				<el-table-column prop="created_at" label="创建时间"></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
			</el-table>
		</div>
		<el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
			:total="totalNums" layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
	</div>
	
</template>

<script setup>
	import { getCurrentInstance, ref, onMounted,watch } from "vue"
	import { useRoute } from "vue-router"
	import { ArrowRight } from "@element-plus/icons-vue"
	import DetailItem from "@components/DetailItem.vue"
	import TitleMore from "@components/title-more.vue"
	import GoBack from "@components/GoBack.vue"
	import OneLoad from "@mixins/one-load"
	
	const route = useRoute()
	const { proxy } = getCurrentInstance()
	
	const uid = route.query.uid
	onMounted(() => {
	    uid && getDetail()
		
		getList()
	})
	
	const loading=ref(false)
	const active = ref(1)
	const objs=ref({})
	function getDetail() {
	    loading.value = true
	    proxy.$axios
	        .get("admin/member/detail", {
	            params: {
	                id: uid,
	            },
	        })
	        .then((res) => {
	            loading.value = false
	            if (res.data.code == 0) {
	                let result = res.data.data
					
					objs.value=result
	            } else {
	                proxy.$message({ message: res.data.msg, type: "error" })
	            }
	        })
	        .catch((err) => {
	            loading.value = false
	        })
	}
	const tabName = ref(0)
	const reqUrl=ref("admin/order/getOrderList?status=5")
	const tabarr = ref([{
			label: "消费能力",
			url:"admin/order/getOrderList?status=5"
		},
		{
			label: "余额变动明细",
			url:"admin/wallet/price/list"
		},
		{
			label: "佣金变动明细",
			url:"admin/commission/price/list"
		},
		{
			label: "积分变动明细",
			url:"admin/integral/price/list"
		}
	])
	/**
	 * minxin列表加载
	 */
	const {
		page,
		pageSizeNum,
		pageSize,
		// loading,
		arr_data,
		totalNums,
		search_text,
		search_btn,
		pubParams,
		pubRefreshParams,
		getdata
	} = OneLoad()
	const type_id = ref("")
	
	// 切换每页显示条数
	watch(pageSize, (val) => {
		page.value = 1
		pubParams(getList)
	})
	// 跳转第几页
	watch(page, (val) => {
		pubParams(getList)
	})
	const handleSearch = () => {
		search_btn.value = true
		pubRefreshParams(getList)
	}
	function getList() {
		let params = {
			page: page.value,
			limit: pageSize.value,
			member_id:uid
		}
		getdata(reqUrl.value, params)
	}
	const handleClick=(e)=>{
		tabName.value=e.index
		reqUrl.value=tabarr.value[e.index].url
		pubParams(getList)
	}
</script>

<style lang="less" scoped>
.good-attr {
    font-size: 14px;
    color: @gray-8;
    margin-bottom: 4px;
}

.good-attr__more {
    color: @themes;
    display: flex;
    align-items: center;
    height: 24px;
    cursor: pointer;
}
.tag-item {
    display: flex;
    align-items: center;
    margin-bottom: @margin-md;
    .tag-item__label {
        flex: none;
        text-align: right;
        width: 140px;
        padding-right: @padding-md;
        font-size: @font-size-md;
        color: @gray-8;
    }

    .tag-item__right {
        flex: none;
        width: 400px;
    }
}
.good-foot {
    .good-foor__item {
        display: flex;
        justify-content: flex-end;
        font-size: 15px;
        color: @gray-8;
        margin-bottom: @margin-xs;
        .good-foor__left {
            flex: none;
            width: 140px;
            text-align: right;
        }
        .good-foor__right {
            flex: none;
            width: 120px;
        }
        .good-large {
            font-weight: bold;
            font-size: @font-size-lg;
        }
    }
}
.good-price {
    color: @red;
    font-size: @font-size-lg;
    em {
        font-size: @font-size-md;
    }
}
.detail-item__price {
    color: @red;
    padding: 0px @padding-base;
    font-weight: bold;
    em {
        font-size: 13px;
    }
}
.od-one {
    display: flex;
    margin-bottom: @margin-xl;
    .od-one__item {
        flex: none;
        width: 33.33%;
        p {
            width: 100%;
            margin-bottom: @margin-sm;
            font-size: @font-size-md;
            color: @gray-8;
            .price-icon {
                font-size: @font-size-sm;
            }
        }
    }
}
</style>